/*
one way of doing it by changing the border(left,right,top) width and color
in the ::after pseudo-element
demo:https://codepen.io/abdelghanymh/pen/mdqyaoR?editors=1100
*/
.indexBanner:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
/*this is where the magic happens*/
border-left: 50vw solid white;
border-right: 50vw solid white;
border-top: 15vw solid transparent;
}
.indexBanner {
background-image: url('http://nauci.se/Flipo/assets/images/study.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-color: #404040;
height: 500px;
position: relative;
overflow-x: hidden;
}
<div class="indexBanner">
</div>
@https://stackoverflow.com/users/6263942/gleb-kemarsky